<script lang="ts" setup>
// @ts-ignore
import system from "~/config/SystemConfig";
// @ts-ignore
import {getAllArchives} from "~/server/article.service";
// @ts-ignore
import {ArticlePath} from "~/config/SystemConfig";

definePageMeta({
    layout: false,
})
useHead({
    bodyAttrs: {
        class: 'page-template page-template-page-archive page'
    },
    title: '文章归档-' + system.slogan
})
const archiveTitle = ref('文章归档')
const archiveDesc = ref('和时间交手，也和时间交朋友。')
const pagination = reactive({
    current: 1,
    total: 0,
    size: 99999
})
const archivesList = ref('' as any)

function getArchivesList() {
    getAllArchives({current: pagination.current, size: pagination.size}).then(({data}: any) => {
        archivesList.value = data.data.records
        pagination.total = data.data.count
    })
}

onMounted(() => {
    getArchivesList()
})
</script>

<template>
    <NuxtLayout name="grid">
        <template v-slot:nav>
            <Nav :title="'文章归档'"/>
        </template>
        <template v-slot:main>
            <PageHeader :title="archiveTitle" :desc="archiveDesc"/>
            <article class="page status-publish hentry">
                <div id="archives">
                    <template v-for="item in archivesList">
                        <div class="al">
                            <ul class="al_mon_list">
                                <li class="fade-before fade-after">
                                    <h2 class="al_mon">{{ item.time.split('-')[0] }}年{{
                                        item.time.split('-')[1]
                                        }}月</h2>
                                    <ul class="al_post_list">
                                        <template v-for="article in item.articles" :key="article.id">
                                            <li>
                                                <span class='post-day'>{{
                                                    String(new Date(article.createTime).getDate()).padStart(2, '0')
                                                    }}</span>
                                                <span class="post-week">{{ getDayOfWeek(String(article.createTime).split('T')[0]) }}</span>
                                                <a :href="ArticlePath.Path + article.id">{{ article.articleTitle }}</a>
                                            </li>
                                        </template>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </template>
                </div>
            </article>
        </template>
    </NuxtLayout>
</template>
<style scoped>
#archives {
    display: grid;
    gap: var(--gap-area);
}

.al_year {
    position: sticky;
    z-index: -1;
    font-size: calc(100vh / 2);
    line-height: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: thin hsl(var(--font-color) / .02);
    top: 0;
    width: 0;
    float: right;
    writing-mode: tb-rl;
    font-family: monospace;
}

.al_mon {
    font-size: 1.5rem;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px hsl(var(--font-color) / .2);
    -webkit-mask: linear-gradient(#000 80%, #0000 80%);
    margin: -.3rem 0;
}

.al_mon_list {
    display: grid;
    gap: var(--gap-area);
    list-style: none;
    margin: 0;
}

.al_post_list {
    margin: 0 calc(100vh / 5) 0 0;
    background: var(--w-bg, rgb(255 255 255 / .7));
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius);
    padding: var(--gap-divs);
}

.al_post_list li {
    display: flex;
    align-items: center;
    margin: 0;
    gap: var(--gap-divs);
    content-visibility: auto;
    contain-intrinsic-size: 2rem;
}

.al_post_list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.al_post_list li span {
    opacity: .3;
    font-size: .5rem;
    flex: none;
    font-variant: tabular-nums;
}

.al_post_list .post-day {
    font-size: 1rem;
    color: var(--color);
    margin: 0 -0.5rem 0 0;
}

.al_post_list .post-day:after {
    content: "日";
    font-size: .5rem;
    margin: 0 .5em;
    vertical-align: middle;
}

@media (max-width: 641px) {
    .al_post_list {
        margin: 0;
    }

    .al_year {
        display: none;
    }
}
</style>
